<template>
    <div class="box">
        <h3>静态资源</h3>
        <p>1.Vue模块化项目的静态资源可以直接存放于 public 目录;【除非特殊情况，一般不建议将静态资源直接存放于public中】</p>
        <ul>
            <li>
                直接通过浏览就访问服务器目录中对应的图片资源即可
                <img src="../../assets/10.png" alt="" srcset="">
            </li>
            <li>
                旧版本脚手架构建的模块环境，通过相对路径加载 public 目录资源后，运行时路径不会被改变，程序提示404 <br>
                在旧版本环境中建议使用服务器地址方式直接加载 public 目录资源；如果服务器启动目录发生变化，该路径也需要动态修改 <br>
                vue模块化项目中存在一个全局的环境变量  process.env.BASE_URL ，该变量指向于 vue.config.js 中的publicPath 
                <img class="tip" :src=" baseUrl + 'img/111.jpg' " alt="" srcset="">
                <br>
                新版本脚手架构建的模块环境，通过相对路径加载 public 目录资源后，运行时会被改变路径地址 <br>
                【public路径会自动替换为vue.config.js的publicPath取值】
                <img class="tip" src="../../../../public/img/111.jpg" alt="" >
                <img src="../../assets/11.png" alt="" srcset="">
            </li>
        </ul>
        <p>2.vue模块化项目的开发静态资源建议存储于 src/……/assets 文件夹中</p>
        <ul>
            <li>
                src 目录下的所有文件(不区分文件类型)，只要是项目使用的文件一定会被编译 <br>
                src 中的静态资源被加载会自动完成路径指向编译【地址前缀会自动增加 vue.config.js 的publicPath地址】<br>
                src 中的静态资源被加载，被加载的静态资源文件名会补充 hashCode 编码值【网站更新的浏览器缓存问题】<br>
                src 中的静态资源被加载，如果是图片文件，且文件大小在限制范围内，会被自动转变为 base64 图片地址 
                <img class="tip" src="../../assets/dome01.jpg" alt="" srcset="">
                <img src="../../assets/12.png" alt="" srcset="">
                <img class="tip" src="../../assets/loading.gif" alt="" srcset="">
                <img src="../../assets/13.png" alt="" srcset="">
            </li>
        </ul>
        <hr>
        <p>3.imports静态资源加载;[vue模块环境安装有 imports 语法扩展模块，该模块可以对常规静态资源进行加载]</p>
        <ul>
            <li>
                src目录下存放的没有导出功能的js独立文件可以直接作为模块被加载
                <img src="../../assets/14.png" alt="" srcset="">
            </li>
            <li>
                src目录下存放的 css|less|sass|scss 等样式文件，也可以直接作为模块被加载【全局样式定义】<br>
                一般样式导入都只会在 项目入口【默认 main.js|main.ts】 文件中完成
                <img src="../../assets/15.png" alt="" srcset="">
            </li>
            <li>
                src 目录下存放的 视频、音频、图片 等静态资源文件，也可以直接作为模块被加载【返回编译后的资源地址或base64数据】
                <img src="../../assets/16.png" alt="" srcset="">
                <img src="../../assets/17.png" alt="" srcset="">
            </li>
        </ul>
        <hr>
    </div>
</template>

<script>
import "../../assets/js/all.js";
// import "../../assets/css/base.css";
import logo from "../../assets/logo.png";
import dome01 from "../../assets/dome01.jpg";
console.log(logo)
console.log(dome01)

export default {
    data() {
        return {
            baseUrl: process.env.BASE_URL
        }
    },
}
</script>

<style scoped>
.box{
    padding: 10px;
}
img{
    width: 700px;
    display: block;
}
.tip{
    width: 50px;
    border: 1px solid black;
}
</style>